import { Suspense, memo } from "react";
import { ConfigProvider, App, theme } from "antd";
import { IntlProvider } from "react-intl";
import { HelmetProvider } from "react-helmet-async";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { PageLoading } from "@ant-design/pro-components";
import { Loading } from "@/components/Loading";
import { useLocale } from "@/hooks/useLocale";
import { useLayout } from "@/hooks/useLayout";
import routes from "@/routes";

export const AppProvider = memo(() => {
  const { layout } = useLayout();
  const { locale, message } = useLocale();

  return (
    <HelmetProvider>
      <ConfigProvider
        theme={{
          algorithm:
            layout.navTheme == "realDark"
              ? theme.darkAlgorithm
              : theme.defaultAlgorithm,
          token: {
            colorPrimary: layout.colorPrimary,
          },
        }}
        locale={message}
      >
        <IntlProvider locale={locale} messages={message}>
          <App>
            <Suspense fallback={<Loading />}>
              <RouterProvider
                router={createBrowserRouter(routes)}
                fallbackElement={<PageLoading />}
              />
            </Suspense>
          </App>
        </IntlProvider>
      </ConfigProvider>
    </HelmetProvider>
  );
});
export default AppProvider;
